<template>
  <view class="topic-page">
    <!-- 顶部搜索框 -->
    <view class="search-box">
      <uni-icons type="search" size="28rpx" color="#999"></uni-icons>
      <input placeholder="搜索话题" class="search-input" />
    </view>

    <!-- 话题分类Tab -->
    <view class="topic-tab">
      <view 
        class="tab-item" 
        v-for="(item, index) in tabList" 
        :key="index"
        :class="{ active: currentTab === index }"
        @click="switchTab(index)"
      >
        {{ item }}
      </view>
    </view>

    <!-- 话题列表（根据Tab切换内容） -->
    <view class="topic-list">
      <!-- 话题榜内容（默认显示） -->
      <view v-if="currentTab === 1">
        <view class="topic-item" v-for="(topic, index) in topicList" :key="index">
          <view class="topic-rank">{{ index + 1 }}</view>
          <view class="topic-content">
            <view class="topic-title">{{ topic.title }}</view>
            <view class="topic-desc">{{ topic.desc }}</view>
            <view class="topic-meta">
              <uni-icons type="chatbubble" size="24rpx" color="#999"></uni-icons>
              <text class="view-count">{{ topic.viewCount }} 观点</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 追踪/观点榜内容（简化示例） -->
      <view v-else>
        <view class="empty-tip">
          {{ tabList[currentTab] }} 模块开发中
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
// 引入uni-icons（需确保已安装并注册）
import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'

// 话题分类Tab（追踪、话题榜、观点榜）
const tabList = ref(['追踪', '话题榜', '观点榜'])
const currentTab = ref(1) // 默认显示“话题榜”
// 话题榜数据（实际项目从接口获取）
const topicList = ref([
  {
    title: '曼联客场不败场次在英超排名第二，阿森纳27次客场不败',
    desc: '曼联客场对阵阿斯顿维拉，这场比赛的结果对于现阶段的曼联来说影响并不是很大...',
    viewCount: 119
  },
  {
    title: '#司机为救婴儿闯红灯#',
    desc: '网红约司机为救婴儿连闯3红灯，警察查实后取消处罚。',
    viewCount: 1419
  }
])

// 切换Tab
const switchTab = (index) => {
  currentTab.value = index
  // 实际项目中：根据Tab切换请求对应分类的话题数据
}
</script>

<style scoped>
.topic-page {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 搜索框 */
.search-box {
  display: flex;
  align-items: center;
  background-color: #fff;
  margin: 20rpx;
  padding: 15rpx 20rpx;
  border-radius: 60rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}
.search-input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  margin-left: 15rpx;
  padding: 5rpx 0;
}
.search-input::placeholder {
  color: #999;
}

/* 话题分类Tab */
.topic-tab {
  display: flex;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  font-size: 32rpx;
  color: #333;
  position: relative;
}
.tab-item.active {
  color: #d00;
  font-weight: bold;
}
.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 6rpx;
  background-color: #d00;
  border-radius: 3rpx;
}

/* 话题列表 */
.topic-list {
  padding: 20rpx;
}
.topic-item {
  display: flex;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}
.topic-rank {
  font-size: 36rpx;
  color: #999;
  font-weight: bold;
  margin-right: 20rpx;
  line-height: 1.2;
}
.topic-content {
  flex: 1;
}
.topic-title {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 15rpx;
  font-weight: 500;
}
.topic-desc {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 15rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.topic-meta {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #999;
}
.view-count {
  margin-left: 8rpx;
}

/* 空提示 */
.empty-tip {
  text-align: center;
  padding: 100rpx 0;
  color: #999;
  font-size: 28rpx;
}
</style>